<script setup lang="ts">
import { onMounted, ref } from "vue"

// 是否全屏状态
const fullscreen = ref<boolean>(false)

// 获取当前时间并格式化为 年月日时分秒星期几
const formatTime = (): string => {
  const now = new Date()
  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, "0")
  const day = now.getDate().toString().padStart(2, "0")
  const hours = now.getHours().toString().padStart(2, "0")
  const minutes = now.getMinutes().toString().padStart(2, "0")
  const seconds = now.getSeconds().toString().padStart(2, "0")
  const weekDays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ]
  const weekDay = weekDays[now.getDay()]

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
}

// 保存当前时间的 ref
const currentTime = ref<string>(formatTime())

// 每秒更新一次时间
onMounted(() => {
  setInterval(() => {
    currentTime.value = formatTime()
  }, 1000)
})

// 进入退出全屏操作
const screen = () => {
  const element = document.documentElement as any
  if (fullscreen.value) {
    // 退出全屏操作
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (element.webkitCancelFullScreen) {
      element.webkitCancelFullScreen()
    } else if (element.mozCancelFullScreen) {
      element.mozCancelFullScreen()
    } else if (element.msExitFullscreen) {
      element.msExitFullscreen()
    }
  } else {
    // 全屏操作
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen()
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    }
  }

  document.addEventListener("keydown", (e) => {
    if (e.key === "F11") {
      e.preventDefault()
      screen()
    }
  })

  fullscreen.value = !fullscreen.value
}

// 监听页面是否全屏，fullscreen为true代表全屏状态
onMounted(() => {
  window.addEventListener("resize", () => {
    fullscreen.value = window.innerHeight === window.screen.height
  })
})
</script>

<template>
  <div class="container">
    <h1>数据分析与展示平台</h1>
    <div class="home">
      <router-link to="/">
        <img src="@/assets/images/home.png" alt="Home" />
      </router-link>
    </div>
    <div class="max" @click="screen">
      <img src="@/assets/images/max.png" alt="Fullscreen" />
    </div>
    <div class="time">{{ currentTime }}</div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  position: relative;

  h1 {
    height: 100%;
    font-size: 40px;
    color: #daf9ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home,
  .max {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    img {
      width: 20px;
    }
  }

  .home {
    left: 20px;
  }

  .max {
    right: 20px;
  }

  .time {
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
